<template>
  <div class="data-board-item" :style="itemStyle">
    <div v-if="hasTitle" class="header-title board-item">
      <a-row :gutter="[7]">
        <a-col :xl="14">
          <div class="board-title">库位编号</div>
        </a-col>
        <a-col :xl="10">
          <div class="board-title">数量</div>
        </a-col>
      </a-row>
    </div>
    <div class="item-body board-item">
      <a-row v-for="(l, i) in showArr" :key="i" :gutter="[7, 0]" class="board-body-item">
        <a-col :xl="14">
          <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOutRight" :duration="3000">
            <div v-if="l && l.position" :class="`board-value`">
              <!-- <span class="icon-stock" :style="`background: ${getColor({ num: l.num })}`"></span> -->
              {{ l.position }}
            </div>
          </transition>
        </a-col>
        <a-col :xl="10">
          <div v-if="l && l.position" :class="`board-value animate__animated animate__fadeIn num animate__slower`" :style="`color: ${getColor({ num: l.num })}`">
            {{ l.amount }}
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: [Number, String],
      default: 100,
    },
    hasTitle: {
      type: Boolean,
      default: true,
    },
    arr: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      showArr: new Array(10),
    }
  },
  mounted() {
    // setTimeout(() => {
    //   this.title = undefined
    //   this.$nextTick(() => {
    //     this.title = 'A-1-2-2'
    //   })
    // }, 2000)
  },
  computed: {
    itemStyle() {
      const s = []
      const { height } = this
      return s.join(';')
    },
  },
  methods: {
    init() {
      const v = this.arr
      this.showArr = new Array(10)
      setTimeout(() => {
        this.showArr = v
      }, 500)
    },
    getColor({ num }) {
      if (num == 0) {
        return 'red'
      } else if (num > 0 && num <= 40) {
        return 'yellow'
      } else {
        return 'green'
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.data-board-item {
  background-color: #130e09;
  color: #fff;
  font-size: 38px;
  color: #fff;
  font-weight: 700;
  padding: 0 8px;
  .board-title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #333;
    background: linear-gradient(to right, rgb(211, 202, 129), rgb(209, 235, 232), rgb(211, 202, 129));
    border-radius: 14px 14px 0 0;
    text-align: center;
  }
  .board-body-item {
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #fff;
    height: 50px;
    overflow: hidden;
    .num {
      font-size: 42px;
      color: rgb(211, 202, 129);
    }
    .board-value {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .icon-stock {
    display: inline-block;
    width: 30px;
    height: 20px;
    border-radius: 2px;
    background-color: red;
    margin-right: 7px;
    // position: relative;
    // z-index: 0;
    // top: 1.5px;
  }
}
</style>